<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <!-- 引入 layui.css -->
        <link
            rel="stylesheet"
            href="//unpkg.com/layui@2.6.8/dist/css/layui.css"
        />

        <!-- 引入 layui.js -->
        <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    </head>
    <body>
        <div class="layui-layout layui-layout-admin">
            <div class="layui-header">
                <div class="layui-logo layui-hide-xs layui-bg-black">
                    我的后台
                </div>

                <ul class="layui-nav layui-layout-right">
                    <li
                        class="layui-nav-item layui-hide layui-show-md-inline-block"
                    >
                        <a href="javascript:;">
                            <img
                                src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                                class="layui-nav-img"
                            />
                            <span id="username">未登录</span>
                        </a>
                        <dl class="layui-nav-child">
                            <dd><a href="">用户信息</a></dd>
                            <dd><a href="">退出登录</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>

            <div class="layui-side layui-bg-black">
                <div class="layui-side-scroll">
                    <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                    <ul
                        id="left-menu-my"
                        class="layui-nav layui-nav-tree"
                        lay-filter="test"
                    >
                        <li
                            class="layui-nav-item layui-this"
                            lay-header-event="menuLeft"
                            data-url="home.html"
                        >
                            <a href="javascript:;">后台主页</a>
                        </li>
                        <li class="layui-nav-item">
                            <a class="" href="javascript:;">用户管理</a>
                            <dl class="layui-nav-child">
                                <dd><a href="javascript:;">添加用户</a></dd>
                                <dd
                                    lay-header-event="menuLeft"
                                    data-url="userList.html"
                                >
                                    <a href="javascript:;">用户列表</a>
                                </dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item">
                            <a href="javascript:;">商品管理</a>
                            <dl class="layui-nav-child">
                                <dd><a href="javascript:;">添加商品</a></dd>
                                <dd><a href="javascript:;">商品列表</a></dd>
                            </dl>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="layui-body">
                <!-- 内容主体区域 -->
                <iframe
                    style="width: 100%; height: 100%"
                    src="home.html"
                    frameborder="0"
                ></iframe>
            </div>

            <div class="layui-footer">
                <!-- 底部固定区域 -->
                底部固定区域
            </div>
        </div>
    </body>
    <script>
        //JS
        layui.use(['element', 'layer', 'util'], function () {
            var element = layui.element,
                layer = layui.layer,
                util = layui.util,
                $ = layui.$, //leyui的jquery
                UserInfo = null

            //头部事件
            util.event('lay-header-event', {
                //左侧菜单事件
                menuLeft: function (othis) {
                    // layer.msg('展开左侧菜单的操作', { icon: 0 })
                    let url = $(othis).attr('data-url')
                    $('iframe').attr('src', url)
                },
            })
            $(function () {
                chcekLogin()
                showHome()
            })
            function showHome() {
                $('#left-menu-my li').eq(0).click()
                $('.layui-body').html()
            }
            function chcekLogin() {
                let data = localStorage.userInfo
                if (data) {
                    data = JSON.parse(data)
                    $('#username').text(data.username)
                } else {
                    location.href = '注册登录页面.html'
                }
            }
        })
    </script>
</html>
